.expense-type-selector{
  width: 100%;
  padding: 20px 40px;
  .no-expense-type{
    text-align: center;
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    color: #cccccc;
  }
  .search-no-expense{
    text-align: left;
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    color: #cccccc;
  }
  .category-area{
    .category-name{
      color: #666666;
      font-weight: 700;
      font-size: 18px;
      margin: 40px 0 20px 0;
    }
    .ant-card {
      margin-bottom: 10px;
    }
    .expense-card{
      cursor: pointer;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -ms-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      position: relative;
      height: 60px;
      box-sizing: border-box;
      padding-left: 60px;
      padding-right: 14px;
      color: #666;
      font-size: 12px;
      line-height: 16px;
      .ant-card-body{
        padding: 14px 0;
      }
      .selected-icon{
        position: absolute;
        font-size: 20px;
        right: 5px;
        top: 5px;
        color: #31b48b;
        display: none;
      }
      img{
        width: 32px;
        height: 32px;
        top: 14px;
        left: 14px;
        position: absolute;
      }
      .expense-name{
        line-height: 32px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .expense-card.selected{
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
      -o-transform: scale(1.05);
      transform: scale(1.05);
      box-shadow: 0 0 1px 0 #bbbbbb;
      .selected-icon{
        display: block;
      }
    }
    .expense-card:hover{
      box-shadow: 0 0 2px 1px #bbbbbb;
    }
    .expense-card:active{
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      background: #e9e9e9;
    }
  }
  .detail-popover-content {
    max-width: 250px;
    .detail-name {
      text-align: center;
    }
    .detail-instruction {
      color: #999;
    }
  }
}
